import React ,{useState}from 'react'
import { Table, Space, Button, Switch } from 'antd'
import { IPro } from './pro'

export interface ITableListProps {
    dataSource: Array<IPro>
  }
  
  function TableList (props: ITableListProps) {
    let height = 0
    let width = 0
    const h = document.getElementsByTagName('html')
    height = h[0].clientHeight
    width = h[0].clientWidth
    const { dataSource } = props
    // 设定页码以及每页显示的条数 ****************
    const [ current, setCurrent ] = useState(1)
    const [ pageSize, setPageSize ] = useState(10)
    const columns:any = [
      {
        title: '序号',
        align: 'center',
        // fixed: 'left',
        width: 80,
        render (text: number, record: IPro, index: number) { // 自定义单元格的内容
          return <span> { index + 1 }</span>
        }
      },
      {
        title: '产品名称',
        align: 'center', // 表格对齐方式
        // fixed: 'left', // 固定列
        dataIndex: 'proname', // 显示字段
        width: 150
      },
      {
        title: '产品图片',
        align: 'center',
        // fixed: 'left',
        dataIndex: 'img1',
        width: 200,
        render (text:any) {
          return <img src={text} style = {{ width: 50, height: 50 }} />
        }
      },
      {
        title: '产品原价',
        align: 'center',
        width: 160,
        dataIndex: 'originprice',
        sorter (a: IPro, b: IPro) { // ********************
          return a.originprice - b.originprice
        }
      },
      {
        title: '折扣',
        align: 'center',
        width: 160,
        dataIndex: 'discount'
      },
      {
        title: '销量',
        align: 'center',
        width: 160,
        dataIndex: 'sales',
        sorter (a: IPro, b: IPro) {  // ********************
          return a.sales - b.sales
        }
      },
      {
        title: '库存',
        align: 'center',
        width: 160,
        dataIndex: 'stock',
        sorter (a: IPro, b: IPro) { // ********************
          return a.stock - b.stock
        }
      },
      {
        title: '是否售卖',
        align: 'center',
        // fixed: 'right',
        width: 160,
        dataIndex: 'issale',
        render (text:number){
          return(
          <Switch disabled className = "sales_switch" checked = { text === 1 } onChange={ () => {} } />
          )
        }
      },
      {
        title: '是否推荐',
        align: 'center',
        // fixed: 'right',
        width: 160,
        dataIndex: 'isrecommend',
        render (text: number) {
          return (
            <Switch disabled className = "recommend_switch" checked = { text === 1 } onChange={ () => {} } />
          )
        }
      },
      {
        title: '是否秒杀',
        align: 'center',
        // fixed: 'right',
        width: 160,
        dataIndex: 'isseckill',
        render (text: number) {
          return (
            <Switch disabled className = "seckill_switch" checked = { text === 1 } onChange={ () => {} } />
          )
        }
      },
      {
        title: '操作',
        fixed: 'right',
        width: 240,
        align: 'center',
        render () {
          return (
            <Space>
              <Button type="ghost">编辑</Button>
              <Button danger>删除</Button>
            </Space>
          )
        }
      }
    ]
    // rowKey 每一条数据的key值
    // scroll 固定头和列用的
    return (
      <Table dataSource={dataSource} rowKey="proid" columns={columns} scroll={{ x: 1300, y: height * 0.62 }} pagination = { {  //  ****************
        position: ['bottomRight'],
        current,
        pageSize,
        showQuickJumper: true,
        // pageSizeOptions: ['1', '2', '3', '4'],
        onChange: (page, pageSize) => {
          setCurrent(page)
          setPageSize(Number(pageSize))
        }
      } }/>
    );
  }
  export default TableList